<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <Header></Header>
            </el-header>
            <el-container>
                <el-main>
                    <Content></Content>
                </el-main>
                <el-footer class="footer">
                    <Footer></Footer>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import Footer from '@/components/layout/Footer.vue'
import Header from '@/components/layout/Header.vue'
import Content from '@/components/layout/Content.vue'
export default {
    name: 'Index',
    components: {
        Footer,
        Header,
        Content
    },
    data() {
        return {
        }
    }
}
</script>
<style scoped lang="scss">
.common-layout {
    min-height: 100%;
    background-image: url("../src/assets/image/indexBack.png");
    background-size: cover;

    .header,
    .footer {
        position: sticky;
        z-index: 1000;
        background-color: #fff;
    }

    .header {
        top: 0;
        min-height: 60px;
    }

    .footer {
        bottom: 0;
        border-top: 1px solid rgb(220, 223, 230);
        max-height: 20px;
        opacity: 0.1;
    }


}
</style>
